<template>
  <view class="content">
    <image src="../../static/img/123.jpg" class="backgroundImg"></image>
    <view class="form">
      <u--form labelPosition="left" :model="teamInfo" ref="uForm">
        <u-form-item prop="teamInfo.creatorName" :rules="rules" label="组织" labelAlign="right">
          <u--input placeholder="请输入您的企业名称或组织" border="surround" v-model="teamInfo.creatorName"
            style="width: 100%"></u--input>
        </u-form-item>

        <u-form-item prop="teamInfo.name" :rules="rules" label="姓名" labelAlign="right">
          <u--input placeholder="请输入您的真实姓名" border="surround" v-model="teamInfo.name" style="width: 100%"></u--input>
        </u-form-item>

        <u-form-item prop="teamInfo.maxUser" :rules="rules" label="规模" labelAlign="right" @click="showPeople = true">
          <u--input placeholder="请选择成员规模" border="surround" disabled disabledColor="#ffffff" :value="inputValue.
            maxUser"></u--input>
        </u-form-item>


        <u-form-item prop="teamInfo.profession" :rules="rules" label="行业" labelAlign="right"
          @click="showProfession = true">
          <u--input placeholder="请选择行业" border="surround" disabled disabledColor="#ffffff" :value="inputValue.
            profession"></u--input>
        </u-form-item>
      </u--form>

      <u-picker :show="showPeople" :columns="people" keyName="dictLabel" @confirm="peopleConfirm"
        @cancel="showPeople = false"></u-picker>

      <u-picker :show="showProfession" :columns="profession" @confirm="professionConfirm" keyName="dictLabel"
        @cancel="showProfession = false"></u-picker>

      <u-button type="primary" text="提交" @click="saveHandel"></u-button>
    </view>



    <u-toast ref="uToast"></u-toast>

    <u-modal :show="showModal" title="创建团队" @confirm="confirm" confirmText="复制ID">
      <view class="slot-content">
        <view class="modal_box">
          <span class="text">团队创建成功,团队ID:{{ teamId }}</span>
          <image class="image_icon" src="https://v2-h5.uviewui.com/static/uview/common/logo.png"></image>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { createdTeam, getDictData, getTeam } from '@/api/api'
export default {
  data() {
    return {
      teamInfo: {},
      profession: [],
      people: [],
      showProfession: false,
      showPeople: false,
      people: [],
      showModal: false,
      inputValue: {
        profession: "",
        maxUser: "",
      },
      teamId: ""
    }
  },
  onShow() {
    getDictData({ dictType: 'mp_profession' }).then(res => {
      this.profession[0] = res.data
    })
    getDictData({ dictType: 'mp_people' }).then(res => {
      this.people[0] = res.data
    })
  },
  methods: {
    changeHandler(e) {
      const {
        columnIndex,
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      if (columnIndex === 0) {
        this.loading = true
        // 模拟网络请求
        uni.$u.sleep(1500).then(() => {
          picker.setColumnValues(1, this.columnData[index])
          this.loading = false
        })
      }
    },
    // 创建团队
    saveHandel() {
      createdTeam(this.teamInfo).then(res => {
        // 创建完成 查询团队
        if (res.code === 200) {
          this.teamId = res.data
          this.teamInfo = {}
          this.inputValue = {
            profession: "",
            maxUser: "",
          }
          this.showModal = true
        } else {
          this.$refs.uToast.show({
            type: 'error',
            message: res.msg,
          })
        }

      })
    },
    confirm() {
      const that = this
      uni.setClipboardData({
        data: that.teamId,
        success: () => {
          that.$refs.uToast.show({
            type: 'success',
            message: "复制成功",
          })
          that.showModal = false
        },
        fail: () => {
          that.$refs.uToast.show({
            type: 'error',
            message: "复制失败",
          })
          that.showModal = false
        }
      })
    },
    peopleConfirm(e) {
      this.teamInfo.maxUser = e.value[0].dictValue
      this.inputValue.maxUser = e.value[0].dictLabel
      this.showPeople = false
    },
    professionConfirm(e) {
      this.teamInfo.profession = e.value[0].dictValue
      this.inputValue.profession = e.value[0].dictLabel
      this.showProfession = false
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
  position: relative;

  .backgroundImg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -99;
    bottom: 90rpx;
  }

  .form {
    height: 1100rpx;
    width: 100%;
    background: #ffff;
    border-radius: 50rpx 50rpx 0 0;
    position: absolute;
    padding: 50rpx;
    bottom: 0;
    box-sizing: border-box;
  }
}

.modal_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  .image_icon {
    margin-top: 20rpx;
    width: 200rpx;
    height: 200rpx;
  }

  .text {
    color: #404040;
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }
}
</style>